<template>
  <div class="passwordManagement p-[30px]">
    <div class="flex justify-between">
      <span class="font-bold">绑定/解绑手机</span
      ><span class="name"
        ><van-icon
          name="location-o"
          class="mr-[5px]"
        />当前位置：账户安全-安全设置-校验手机号</span
      >
    </div>
    <el-divider />
    <div class="mt-[10px] flex flex-col justify-center">
      <div class="div-top p-[30px]">
        <div class="flex items-center">
          <img class="block w-[100px]" alt="Vue logo" src="~@/assets/3.png" />
          <div class="flex flex-col ml-[20px]">
            <span class="text-[20px]">手机检验绑定</span>
            <span
              >欢迎您!超级管理员,请填写您的手机点击发送验证码，系统会向您的手机发送短信，您需输入短信内容中的验证码进行验证</span
            >
          </div>
        </div>
      </div>
      <div class="mt-[30px] flex justify-center">
        <el-form
          ref="ruleFormRef"
          style="width: 500px; text-align: center"
          :model="formData"
          :rules="rules"
          label-width="auto"
          size="default"
        >
          <el-form-item label="已绑定手机号：" prop="phone">
            <el-input
              v-model="formData.phone"
              style="width: 250px"
              placeholder="请输入已绑定手机号"
              disabled
            />
            <el-button
              class="ml-[10px]"
              type="primary"
              @click="sendVerificationCode"
              >发送验证码</el-button
            >
          </el-form-item>
          <el-form-item
            label="短信验证码："
            prop="verificationCode"
            placeholder="请输入短信验证码"
          >
            <el-input
              v-model="formData.verificationCode"
              style="width: 250px"
            />
          </el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            解绑
          </el-button>
          <el-button type="text" class="ml-[10px]"> 其它解绑方式 </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules, ElMessage } from "element-plus";
interface RuleForm {
  phone: string;
  verificationCode: string;
}
const ruleFormRef = ref<FormInstance>();
const formData = ref<RuleForm>({
  phone: "187********56",
  verificationCode: ""
});

const sendVerificationCode = () => {
  if (!formData.value.phone) {
    ElMessage.error("请输入手机号");
    return;
  }
  // 这里添加发送验证码的逻辑
  ElMessage.success("验证码已发送");
};
const rules = reactive<FormRules<RuleForm>>({
  phone: [{ required: true, message: "请输入已绑定手机号", trigger: "blur" }],
  verificationCode: [
    { required: true, message: "请输入短信验证码", trigger: "blur" }
  ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success("解绑成功");
    } else {
      // ElMessage.error("解绑失败，请重试");
    }
  });
};
</script>

<style lang="scss" scoped>
.passwordManagement {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
  .div-top {
    width: 100%;
    background-color: #f7f9ff;
  }
}
.el-alert {
  padding: 0 0 0 10px;
}
</style>
